<template>
    <div class="login-box">
        <div class="login-box-left">
            <img src="../../../public/logo.png" alt="">
        </div>
        <div class="login-box-right">
            <div class="login-box-right-content">
                <h1>学院宿舍后台管理系统</h1>
                <div class="login-box-right-content-form">
                    <el-form :label-position="labelPosition" label-width="100px" ref="ruleFormRef" :model="formLabelAlign"
                        v-model="labelPosition" :rules="rules">
                        <el-form-item label="用户名:" prop="username">
                            <el-input v-model="formLabelAlign.username" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item label="密码:" prop="password">
                            <el-input v-model="formLabelAlign.password" placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>


<script setup>
import { reactive, ref } from 'vue'
import { ApiLogin } from '../../api'
import { ElMessage } from 'element-plus'
import Cookies from 'js-cookie'

//label位置
const labelPosition = ref('top')

const ruleFormRef = ref()

//表单绑定
const formLabelAlign = reactive({
    username: '',
    password: '',
})

//表单验证
const rules = reactive({
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
    ],
})


//登录验证
const submitForm = (val) => {
    if (!val) return
    val.validate((valid) => {
        if (valid) {
            ApiLogin(formLabelAlign).then(res => {
                //成功提示
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                //存储token
                Cookies.set("token", res.token)
                //跳转页面
                setTimeout(() => {
                    window.location.href = '/'
                }, 1000);
            })
        } else {
            return false
        }
    })
}

</script>

<style lang="scss" scoped>
.login-box {
    width: 100%;
    height: 100%;
    display: flex;
    min-width: 1500px;

    .login-box-left {
        width: 667px;
        height: 100%;
        background: url('../../../public/bg-left.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
        }
    }

    .login-box-right {
        flex: 1;
        background: url('../../../public/bg-right.png') no-repeat;
        background-size: 100%;
        background-position: bottom;
        display: flex;
        align-items: center;
        justify-content: center;

        .login-box-right-content {
            width: 100%;
            padding: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .login-box-right-content-form {
                width: 100%;
                margin: auto;
            }

            h1 {
                text-align: center;
                font-size: 50px;
                color: #3E89F9;
            }
        }
    }
}

.el-input__wrapper {
    height: 60px;
}

.el-input {
    --el-input-height: 50px;
}

.el-button {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    font-size: 20px;
}
</style>